import React, {Component} from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import Login from '../components/Login'
import MyAlert from '../components/MyAlert'
import {actions} from '../actions'
@connect(
    state => ({
      sending: state.login.sending,
      sec: state.login.sec,
      binded: state.common.binded
    }),
    dispatch => ({
      ...bindActionCreators({
        sendingSms: actions.sendingSms,
        fetchSendSMS: actions.fetchSendSMS,
        fetchBindMobile: actions.fetchBindMobile,
        countDownSec: actions.countDownSec
      }, dispatch)
    })
)
export default class App extends Component {
  constructor() {
    super()
    this.state = {showAlert: false}
  }
  componentWillMount() {
    this.props.hideFooter(true)
  }
  componentWillUnmount() {
    this.props.hideFooter(false)
  }

    // 验证手机号
  _isMobile = tel => {
    if (!/^1[34578]\d{9}$/.test(tel)) {
      this.props.showMessage('手机号输入错误')

      return false
    }

    return true
  }

    // 验证验证码
  _isCode = code => {
    if (!/^\d{4}$/.test(code)) {
      this.props.showMessage('验证码输入错误')

      return false
    }

    return true
  }

    // 发送验证码
  _sendCode = e => {
    if (this.props.binded) {
      this.setState({showAlert: true})

      return false
    }

    let tel = e.refs.tel.value

    if (!this._isMobile(tel)) {
      return false
    }
    if (this.props.sending) {
      return false
    }
    this.props.fetchSendSMS({telephone: tel}).then(() => {
      this._countDown()
    })
  }

    // 绑定手机号
  _bindMobile = (e, url) => {
    let tel = e.refs.tel.value,
      code = e.refs.code.value

    if (!this._isMobile(tel)) {
      return false
    }
    if (!this._isCode(code)) {
      return false
    }
    this.props.fetchBindMobile({
      code,
      telephone: tel
    }, url)
  }

    // 倒计时
  _countDown = () => {
    const sec = this.props.sec

    if (sec > 0) {
      setTimeout(() => {
        this.props.countDownSec(sec - 1)
        this._countDown()
      }, 1000)
    } else {
      this.props.sendingSms(false)
      this.props.countDownSec(60)
    }
  }

  // 清除手机号码
  _clearPhone=e => {
    e.refs.tel.value = ''
  }

  // 显示弹框提示
  _cancelCancel=() => {
    this.setState({showAlert: false})
  }
  render() {
    const {sending, sec} = this.props
    let ourl = window.location.href.split('??')[1]
    let deviceHeight = window.innerHeight

    return (
            <section className="wrapper J-scroll" style={{height: deviceHeight, overflow: 'hidden', position: 'relative', padding: '0'}}>
                <Login
                    sending={sending}
                    sec={sec}
                    countDown={this._countDown}
                    sendCode={this._sendCode}
                    bindMobile={this._bindMobile}
                    url = {ourl}
                    clearPhone={this._clearPhone}
                />
                {
                    this.state.showAlert ?
                        <MyAlert
                            cancelCancel={this._cancelCancel}
                            tel={17612155121}
                        /> : ''
                }

            </section>
    )
  }
}
